import React, { Component } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { Thumbnail } from 'native-base';

class UserInfo extends Component {
    modifyTel() {
        Alert.alert(
            '更改手机号',
            '开发中...',
        )
    }

    render() {
        return (
            <View style={styles.userinfo}>
                <View>
                    <Text style={{fontSize:22}}>柳周侯爷</Text>
                    <View style={styles.telBox}>
                        <Text style={styles.tel}>18209997812</Text> 
                        <Text onPress={this.modifyTel} style={styles.modifyTel}>更改</Text>
                    </View>
                </View>
                <Thumbnail large source={require("../static/kaneki.jpeg")} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    userinfo: {
        display: "flex",
        flexDirection: "row",
        justifyContent: 'space-between',
        alignItems: "center"
    },
    telBox:{
        display:"flex",
        flexDirection:"row",
        marginTop: 16,
        alignItems: "center"
    },
    tel:{
        fontSize: 16,
        color: "#888"
    },
    modifyTel:{
        fontSize: 16,
        color: "#888",
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#aaa",
        borderRadius: 15,
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 5,
        paddingBottom: 5,
        marginLeft: 15,
    }
})

export default UserInfo;